<template>
  <div class="accountinfo">
    <el-dialog :visible="dialogVisible" width="50%" :before-close="closeDialog">
      <el-form>
        <span class="title">添加</span>
        <div class="essential">
          <el-form-item label="账号">
            <el-input v-model="form.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选择角色:">
            <el-select placeholder="请选择" v-model="form.roleId">
              <el-option
                v-for="itm in rolelist"
                :key="itm.value"
                :label="itm.roleName"
                :value="itm.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择科室:">
            <el-select placeholder="请选择" v-model="form.departmentId">
              <el-option
                v-for="itm in departmentlist2"
                :key="itm.value"
                :label="itm.departmentName"
                :value="itm.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="manageSide">
          <span class="title">PC端</span>
          <el-checkbox-group v-model="checkList">
            <el-form-item v-for="(item, index) of pcMenu" :key="index">
              <el-checkbox :label="item.id">
                <span>
                  {{ item.title }}
                </span>
              </el-checkbox>
              <el-select
                @change="selectAll($event, item.id)"
                :disabled="checkList.indexOf(item.id) == -1 ? true : false"
                v-model="item.label1"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="itm in departmentlist"
                  :key="itm.value"
                  :label="itm.departmentName"
                  :value="itm.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-checkbox-group>
        </div>
        <div class="mobileterminal">
          <span class="title">APP端</span>
          <el-checkbox-group v-model="moveextent">
            <el-form-item v-for="(item, index) of moveextentList" :key="index">
              <el-checkbox :label="item.id">
                <span>
                  {{ item.title }}
                </span>
              </el-checkbox>
              <el-select
                @change="selectAll2($event, item.id)"
                v-model="item.label2"
                multiple
                placeholder="请选择"
                :disabled="moveextent.indexOf(item.id) == -1 ? true : false"
              >
                <el-option
                  v-for="itm in departmentlist"
                  :key="itm.value"
                  :label="itm.departmentName"
                  :value="itm.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-checkbox-group>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolelist: [], //下拉框角色列表
      departmentlist2: [], //下拉框科室列表
      dialogVisible: false,
      form: {
        account: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        password: "",
      },
      checkList: [],
      checkLabel1: [
        {
          label: "首页:",
          value: [],
        },
        {
          label: "添加患者:",
          value: [],
        },
        {
          label: "数据管理:",
          value: [],
        },
        {
          label: "床位管理:",
          value: [],
        },
        {
          label: "设备管理:",
          value: [],
        },
        {
          label: "质量管理:",
          value: [],
        },
        {
          label: "角色管理:",
          value: [],
        },
        {
          label: "条形码:",
          value: [],
        },
        {
          label: "科室管理:",
          value: [],
        },
      ],
      departmentlist: [
        {
          label: "妇产科妇产科妇产科",
          value: "10",
        },
        {
          label: "骨科",
          value: "20",
        },
        {
          label: "美容科",
          value: "30",
        },
        {
          label: "眼科",
          value: "40",
        },
        {
          label: "全选",
          value: "99",
        },
      ],
      // APP端
      moveextentList: [
        {
          label: "首页:",
          value: "",
        },
        {
          label: "添加患者:",
          value: "",
        },
        {
          label: "血糖管理:",
          value: "",
        },
      ],
      moveextent: [],
      pcMenu: [
        {
          id: 4,
          deanId: 2,
          title: "主页",
          parentId: 0,
          path: "/home",
          alwaysShow: false,
          redirect: "/index",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:03:11.000+0000",
          updateTime: "2021-04-14T01:03:14.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 6,
          deanId: 2,
          title: "床位管理",
          parentId: 0,
          path: "/beds",
          alwaysShow: true,
          redirect: "/bedManagement",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:08:20.000+0000",
          updateTime: "2021-04-14T01:08:22.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 8,
          deanId: 2,
          title: "患者详情",
          parentId: 0,
          path: "/patient",
          alwaysShow: false,
          redirect: "/patientDetails",
          component: "layout",
          roles: "sys:noAccess",
          hidden: true,
          perOrder: 1,
          createTime: "2021-04-14T01:11:55.000+0000",
          updateTime: "2021-04-14T01:11:57.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 10,
          deanId: 2,
          title: "添加患者",
          parentId: 0,
          path: "/patientadd",
          alwaysShow: true,
          redirect: "/addPatient",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:14:38.000+0000",
          updateTime: "2021-04-14T01:14:40.000+0000",
          isDelete: "0",
          clientType: "0",
        },
      ],
      appMenu: [
        {
          id: 1,
          deanId: 2,
          title: "HomePage",
          alwaysShow: true,
          roles: "sys:homePage",
          hidden: true,
          perOrder: 1,
          createTime: "2021-04-08T07:59:54.000+0000",
          updateTime: "2021-04-14T02:00:53.000+0000",
          isDelete: "0",
          clientType: "1",
        },
        {
          id: 2,
          deanId: 2,
          title: "InstallUser",
          alwaysShow: true,
          roles: "sys:addUser",
          hidden: true,
          perOrder: 2,
          createTime: "2021-04-08T08:34:03.000+0000",
          updateTime: "2021-04-14T02:00:56.000+0000",
          isDelete: "0",
          clientType: "1",
        },
        {
          id: 3,
          deanId: 2,
          title: "TestGluce",
          alwaysShow: true,
          roles: "sys:testGluce",
          hidden: true,
          perOrder: 3,
          createTime: "2021-04-08T08:35:20.000+0000",
          updateTime: "2021-04-14T02:00:58.000+0000",
          isDelete: "0",
          clientType: "1",
        },
      ],
      checkLabel: [],
    };
  },
  props: {
    // 控制弹框显示关闭
    activeRoleDialog: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    this.checkLabel = this.pcMenu.map((item) => {
      return (item = {
        title: item.title,
        id: item.id,
        value: [],
      });
    });
    this.dialogVisible = this.activeRoleDialog;
    let data = {};
    this.getRoleInfo(data);
    let routeid = sessionStorage.getItem("routeID");
    let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
    this.getDepartment(routeID);
    this.getRoleAdd(data);
  },
  methods: {
    //选择角色下拉框
    getRoleInfo() {
      let data = {};
      this.$api.getRoleInfo(data).then((res) => {
        // console.log(res.data.data);
        this.rolelist = res.data.data;
      });
    },
    getRoleAdd() {
      let data = {};
      this.$api.getRoleAdd(data).then((res) => {
        // console.log(res.data);
        this.pcMenu = res.data.allInfoPc;
        this.moveextentList = res.data.allInfoApp;
        // this.rolelist = res.data.data;
        // console.log(this.pcMenu);
        // console.log(this.moveextentList);
      });
    },
    // 查询所有科室
    getDepartment(val) {
      let data = {
        perId: val,
      };
      this.$api.getDepartment(data).then((res) => {
        this.departmentlist2 = res.data.data;
        // console.log(this.departmentlist2);
        let departmentList = res.data.data.map((item) => {
          return {
            id: item.id,
            departmentName: item.departmentName,
          };
        });
        // 添加一个全选
        departmentList.push({
          id: 99,
          departmentName: "全选",
        });
        let obj = JSON.stringify(departmentList);
        this.departmentlist = JSON.parse(obj);
        // console.log(this.departmentlist);
        // console.log(this.checkLabel);
      });
    },
    submit() {
      // console.log(this.checkList);
      // console.log(this.moveextent);
      // console.log(this.pcMenu);

      let pclist = {}; //pc需要传给后端的数据
      let label1 = this.pcMenu.map((item) => {
        return item.label1;
      });
      // console.log(label);
      let pcLabel = label1.filter((item) => item);
      // console.log(pcLabel);
      // 将选中框的类型转换为string格式
      let pcselect = this.checkList.map(String);
      // console.log(pcselect);
      for (let i = 0; i < pcselect.length; i++) {
        pclist[pcselect[i]] = pcLabel[i];
      }
      // console.log(pclist);
      let applist = {}; //app需要传给后端的数据
      if (this.moveextentList) {
        console.log(this.moveextentList);
        let label2 = this.moveextentList.map((item) => {
          return item.label2;
        });
        // console.log(label2);
        let appLabel = label2.filter((item) => item);
        // console.log(appLabel);
        // 将选中框的类型转换为string格
        let checkphone1 = this.moveextent.filter((item) => !item.title);
        let appselect = checkphone1.map(String);
        // console.log(appselect);
        for (let i = 0; i < appselect.length; i++) {
          applist[appselect[i]] = appLabel[i];
        }
        // console.log(applist);
      }

      let data = {
        account: this.form.account,
        doctorName: this.form.name,
        appLists: applist,
        pcLists: pclist,
        password: this.form.password,
        roleId: this.form.roleId,
        departmentId: this.form.departmentId,
      };
      console.log(data);
      //角色添加接口
      this.$api
        .addRole(data)
        .then((res) => {
          this.$message.success(res.message);
          let data={}
          this.$parent.getAllRoleInfo(data)
          this.$parent.foundAccount(false);
        })
        .catch((err) => {
          this.$message.error(err.message);
          // console.log(err);
        });
    },
    closeDialog() {
      this.$parent.foundAccount(false);
    },
    //pc端全选
    selectAll(val, id) {
      // console.log(val);
      // 因为全选之后,下拉框里不能出现全选本身这个内容,需要先截取掉
      let temporary = this.departmentlist.filter((item) => {
        return item.id != "99";
      });
      // console.log(temporary);
      // 判断如果勾选全部的情况
      if (val.includes(99)) {
        for (let i = 0; i < this.pcMenu.length; i++) {
          // console.log(this.pcMenu[i]);
          if (id == this.pcMenu[i].id) {
            this.pcMenu[i].label1 = temporary.map((item) => {
              return (item = item.id);
            });
          }
        }
      }
      this.$forceUpdate();
    },
    // app端全选
    selectAll2(val, id) {
      // console.log(val);
      // 因为全选之后,下拉框里不能出现全选本身这个内容,需要先截取掉
      let temporary = this.departmentlist.filter((item) => {
        return item.id != "99";
      });
      // console.log(temporary);
      // 判断如果勾选全部的情况
      if (val.includes(99)) {
        for (let i = 0; i < this.moveextentList.length; i++) {
          // console.log(this.moveextentList[i]);
          if (id == this.moveextentList[i].id) {
            this.moveextentList[i].label2 = temporary.map((item) => {
              return (item = item.id);
            });
          }
        }
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.accountinfo {
  .title {
    display: block;
    text-align: center;
    font-size: 20px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #333333;
    margin-bottom: 25px;
  }
  .el-form {
    padding: 0 20px;
    // 公共信息样式
    .essential {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item {
        // background-color: violet;
        display: flex;
        width: 30%;
        height: 40px;
        & >>> .el-form-item__label {
          width: 95px;
          height: 40px;
          text-align: left;
        }
        & >>> .el-form-item__content {
        }
      }
      @media screen and (max-width: 1474px) {
        .el-form-item {
          width: 50%;
        }
      }
    }
    @media screen and (max-width: 919px) {
      .essential {
        justify-content: center;
        .el-form-item {
          width: 80%;
          justify-content: space-between;
        }
      }
    }
    // pc端和app端的样式
    .manageSide,
    .mobileterminal {
      .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item {
          width: 30%;
          // height: 60px;
          & >>> .el-form-item__content {
            display: flex;
            justify-content: space-between;
            .el-checkbox {
              width: 95px;
              // height: 60px;
              // line-height: 60px;
              margin: 0;
            }
            .el-input__inner {
              max-width: 180px;
              // height: 60px;
            }
          }
        }
      }
    }
    @media screen and (max-width: 1474px) {
      .manageSide {
        .el-checkbox-group {
          .el-form-item {
            width: 50%;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
      .mobileterminal {
        .el-checkbox-group {
          .el-form-item {
            width: 50%;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
    }
    @media screen and (max-width: 919px) {
      .manageSide {
        .el-checkbox-group {
          justify-content: center;
          .el-form-item {
            width: 80%;
            justify-content: center;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
      .mobileterminal {
        .el-checkbox-group {
          justify-content: center;
          .el-form-item {
            width: 80%;
            justify-content: center;
            & >>> .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
  & >>> .el-dialog__footer {
    background-color: rgba(1, 167, 240, 0.1);
    text-align: center;
  }
}
</style>